<template>
    <!-- action自动上传的上传地址，必写，手动上传就留空字符串 -->
    <!-- http-request 自定义上传 -->
  <el-upload class="avatar-uploader" action="" :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImage">
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
  import COS from 'cos-js-sdk-v5'
  export default {
    name: 'ImageUpload',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    methods: {
      // 上传文件前的钩子，对文件进行格式和大小的检查，参数为上传的文件，若返回 false 或返回 失败的Promise，则停止上传。
      beforeAvatarUpload(file) {
        // 支持的头像格式类型
        const isFormat = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type);
        // 支持的文件大小  Byte / KB / MB  file.size默认单位是byte，除以两次 1024 转化为MB，图片大小要小于5M
        const isLt5M = file.size / 1024 / 1024 < 5;

        if (!isFormat) {
          this.$message.error('上传头像图片只能是 JPG PNG GIF BMP格式!');
        }
        if (!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isFormat && isLt5M;
      },
      // 实现自定义上传图片的方法
      uploadImage(params) {
        // 初始化cos
        const cos = new COS({
          // 应用标识和应用密钥
          SecretId: 'AKIDqdIm372lHcptlSwRp100tdIoAW7bv667',
          SecretKey: '223yjLo6APgljy3DPdhZWN5cw2ub9Xin'
        })
        cos.putObject({
          Bucket: 'vue2-hr-project-1335279076',  // 存储桶名称
          Region: 'ap-nanjing',  // 存储桶地域名称
          Key: params.file.name,  // 文件名称
          StorageClass: 'STANDARD',  // 固定值
          Body: params.file  // 文件对象
        }, (err, data) => {
          // err 错误信息  data返回的数据对象
          if(data.statusCode === 200 && data.Location) {
            // 状态码为200，说明图片成功上传腾讯云服务器，把图片地址传给收集员工详情信息里的对应字段
            this.$emit('input', 'http://' + data.Location)
          } else {
            // 上传失败弹出错误信息
            this.$message.error(err.message)
          }
        })
      },
    }
  }
</script>

<style scoped>
  /* 当style标签加上scoped属性时，第三方组件库的组件可能没法正常显示样式，Vue提供了深度作用选择器
  （通常是>>>或/deep/）来处理这种情况，使用这种选择器可以将样式作用到第三方库组件内的元素上。 */
  .avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader >>> .el-upload:hover {
    border-color: #409EFF;
  }

  >>> .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  >>> .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>